<template>
  <div class="application">
    <h3>必备</h3>
    <div class="necessary" @click="$router.push('/start_server')">
      <span class="necessary_bg"></span>
      <div @click.stop="openserver">
        <span :class="appType === '277' ? 'icon_func' : 'icon_func_cat'" v-if="!list.openserver"></span>
        <span class="icon_func_add" v-else></span>
      </div>
    </div>
    <h3>游戏类型</h3>
    <ul class="type_box">
      <li class="type_list" @click="gameType(0)">
        <div class="type_list_item">
          <img :src="typeList[0].img" alt="">
          <span>{{typeList[0].title}}</span>
        </div>
      </li>
      <li class="type_list" @click="gameType(1)">
        <div class="type_list_item">
          <img :src="typeList[1].img" alt="">
          <span>{{typeList[1].title}}</span>
          <div @click.stop="discount">
            <span :class="appType === '277' ? 'icon_func' : 'icon_func_cat'" v-if="!list.discount"></span>
            <span class="icon_func_add" v-else></span>
          </div>
        </div>
      </li>
      <li class="type_list" @click="gameType(2)">
        <div class="type_list_item">
          <img :src="typeList[2].img" alt="">
          <span>{{typeList[2].title}}</span>
          <div @click.stop="bt">
            <span :class="appType === '277' ? 'icon_func' : 'icon_func_cat'" v-if="!list.bt"></span>
            <span class="icon_func_add" v-else></span>
          </div>
        </div>
      </li>
      <li class="type_list" @click="gameType(3)">
        <div class="type_list_item">
          <img :src="typeList[3].img" alt="">
          <span>{{typeList[3].title}}</span>
          <div @click.stop="web">
            <span :class="appType === '277' ? 'icon_func' : 'icon_func_cat'" v-if="!list.web"></span>
            <span class="icon_func_add" v-else></span>
          </div>
        </div>
      </li>
    </ul>
    <h3>游戏详情</h3>
    <ul class="detail_box">
      <li class="type_list" @click="gameDetail(0)">
        <div class="type_list_item">
          <img :src="detailList[0].img" alt="">
          <span>{{detailList[0].title}}</span>
          <div @click.stop="active">
            <span :class="appType === '277' ? 'icon_func' : 'icon_func_cat'" v-if="!list.active"></span>
            <span class="icon_func_add" v-else></span>
          </div>
        </div>
      </li>
      <li class="type_list" @click="gameDetail(1)">
        <div class="type_list_item">
          <img :src="detailList[1].img" alt="">
          <span>{{detailList[1].title}}</span>
          <div @click.stop="vip">
            <span :class="appType === '277' ? 'icon_func' : 'icon_func_cat'" v-if="!list.vip"></span>
            <span class="icon_func_add" v-else></span>
          </div>
        </div>
      </li>
      <li class="type_list" @click="gameDetail(2)">
        <div class="type_list_item">
          <img :src="detailList[2].img" alt="">
          <span>{{detailList[2].title}}</span>
          <div @click.stop="stopserver">
            <span :class="appType === '277' ? 'icon_func' : 'icon_func_cat'" v-if="!list.stopserver"></span>
            <span class="icon_func_add" v-else></span>
          </div>
        </div>
      </li>
    </ul>
    <h3>应用工具</h3>
    <ul class="charge_box">
        <li class="tool_box">
          <div class="type_list_item" @click="$router.push('/page_tools')">
            <img src="../../../assets/img/apply/ic_func_auxiliary_tool.png" alt="">
            <span>辅助工具</span>
            <div @click.stop="tool">
              <span :class="appType === '277' ? 'icon_func' : 'icon_func_cat'" v-if="!list.tool"></span>
              <span class="icon_func_add" v-else></span>
            </div>
          </div>
        </li>
         <li class="tool_box" v-show="$store.state.isDc">
          <div class="type_list_item" @click="$router.push('/recharge_manage')">
            <img src="../../../assets/img/apply/ic_charge.png" alt="">
            <span>代充管理</span>
            <div @click.stop="charge">
              <span :class="appType === '277' ? 'icon_func' : 'icon_func_cat'" v-if="!list.charge"></span>
              <span class="icon_func_add" v-else></span>
            </div>
          </div>
        </li>
    </ul>
    <h3>设置</h3>
    <ul class="setup_box">
      <li v-for="(list, index) in setupList" :key="index" class="setup_list" @click="setupClick(index)">
        <span>
          <img class="left_img" v-show="appType === '277'" :src="list.img" alt="">
          <img class="left_img" v-show="appType === 'cat'" :src="list.img_cat" alt="">
        </span>
        <span class="setup_title">{{list.title}}</span>
        <span>
          <img class="right_img" v-show="appType === '277'" src="../../../assets/img/apply/ic_func_setting_right.png" alt="">
          <img class="right_img" v-show="appType === 'cat'" src="../../../assets/img/apply/ic_func_setting_right_cat.png" alt="">
        </span>
      </li>
    </ul>
    <p class="footer_text"><span v-show="appType === '277'">277</span><span v-show="appType === 'cat'">灵猫</span>游戏速推版</p>
  </div>
</template>

<script>
import {Toast} from 'vant'
import storage from '../../../common/storage'
import { getHomePage } from '../../../network/home'
import { appType } from '../../../assets/js/app'
  export default {
    data() {
      return {
        tgid: '',
        show: false,
        typeList: [
          {img: require('../../../assets/img/apply/ic_func_all_game.png'),title: '全部游戏',add: false},
          {img: require('../../../assets/img/apply/ic_func_discount.png'),title: '折扣手游',add: true},
          {img: require('../../../assets/img/apply/ic_func_bt.png'),title: 'BT手游',add: true},
          {img: require('../../../assets/img/apply/ic_func_h5.png'),title: 'H5手游',add: true},
        ],
        detailList: [
          {img: require('../../../assets/img/apply/ic_func_active.png'),title: '游戏活动',add: true},
          {img: require('../../../assets/img/apply/ic_func_vip.png'),title: 'VIP查询',add: true},
          {img: require('../../../assets/img/apply/ic_func_stopserver_turngame.png'),title: '停服转游',add: true},
        ],
        setupList: [
          {img: require('../../../assets/img/apply/ic_func_left_contact.png'),title: '联系专员',img_cat: require('../../../assets/img/apply/ic_func_left_contact_cat.png'),},
          {img: require('../../../assets/img/apply/ic_func_left_password.png'),title: '密码管理', img_cat: require('../../../assets/img/apply/ic_func_left_password_cat.png'),},
          // {img: require('../../../assets/img/apply/ic_func_left_about.png'),title: '关于我们'},
          // {img: require('../../../assets/img/apply/ic_func_setting_feedback.png'),title: '意见反馈'},
          {img: require('../../../assets/img/apply/ic_func_setting_logout.png'),title: '退出登录',img_cat: require('../../../assets/img/apply/ic_func_setting_logout_cat.png')},
        ],
        list: {},
        z_qq: '',
        appType: null,
      }
    },
    created() {
      this.appType = appType()
      getHomePage().then(res => {
        if(res.state === 'ok') {
          this.z_qq = res.data.z_qq
          } else if (res.state === 'err') {
            if(res.msg === 'no_login') {
              this.$toast(res.msg)
              this.$router.replace('/login')
            }else {
              this.$toast(res.msg)
            }
          }
      })
    },
    mounted () {
      this.tgid = this.$cookies.get('tgid')
      this.list = storage.get(this.tgid)
    },
    activated() {
      this.tgid = this.$cookies.get('tgid')
      this.list = storage.get(this.tgid)
    },
    methods: {
     setupClick(index) {
        if(index === 0) {
          return this.chatQQ()
        }else if (index ===1) {
          return this.$router.push('/password')
        }else if (index ===2) {
          this.$cookies.remove('tgid')
          this.$cookies.remove('token')
          return this.$router.replace('/login')
        }
      },
      chatQQ() {
        /*uin对应的就是需要聊天的客服*/
        window.location.href = 'mqqwpa://im/chat?chat_type=wpa&uin=' + this.z_qq + '&version=1&src_type=web&web_src=oicqzone.com'
      },
      gameDetail(index) {
        if(index === 0) {
          return this.$router.push('/game_activitie')
        }else if (index === 1) {
          return this.$router.push('/vip_query')
        }else if (index === 2) {
          return this.$router.push('/stop_server')
        }
      },
      gameType(index) {
        if(index === 0) {
          return this.$router.push('/all_game')
        }else if (index === 1) {
          return this.$router.push('/discount_game')
        }else if (index === 2) {
          return this.$router.push('/bt_game')
        }else if (index === 3) {
          return this.$router.push('/web_game')
        }
      },
      openserver() {
        if(!this.list.openserver) {
          this.list.openserver = !this.list.openserver
          storage.set(this.tgid, this.list)
          this.$toast('已经添加到首页导航区')
        }else{
          this.list.openserver = !this.list.openserver
          storage.set(this.tgid, this.list)
          this.$toast('已经从首页导航区移除')
        }
      },
      discount() {
        if(!this.list.discount) {
          this.list.discount = !this.list.discount
          storage.set(this.tgid, this.list)
          this.$toast('已经添加到首页导航区')
        }else{
          this.list.discount = !this.list.discount
          storage.set(this.tgid, this.list)
          this.$toast('已经从首页导航区移除')
        }
      },
      bt() {
        if(!this.list.bt) {
          this.list.bt = !this.list.bt
          storage.set(this.tgid, this.list)
          this.$toast('已经添加到首页导航区')
        }else{
          this.list.bt = !this.list.bt
          storage.set(this.tgid, this.list)
          this.$toast('已经从首页导航区移除')
        }
      },
      web() {
        if(!this.list.web) {
          this.list.web = !this.list.web
          storage.set(this.tgid, this.list)
          this.$toast('已经添加到首页导航区')
        }else{
          this.list.web = !this.list.web
          storage.set(this.tgid, this.list)
          this.$toast('已经从首页导航区移除')
        }
      },
      tool() {
        if(!this.list.tool) {
          this.list.tool = !this.list.tool
          storage.set(this.tgid, this.list)
          this.$toast('已经添加到首页导航区')
        }else{
          this.list.tool = !this.list.tool
          storage.set(this.tgid, this.list)
          this.$toast('已经从首页导航区移除')
        }
      },
      charge() {
        if(!this.list.charge) {
          this.list.charge = !this.list.charge
          storage.set(this.tgid, this.list)
          this.$toast('已经添加到首页导航区')
        }else{
          this.list.charge = !this.list.charge
          storage.set(this.tgid, this.list)
          this.$toast('已经从首页导航区移除')
        }
      },
      active() {
        if(!this.list.active) {
          this.list.active = !this.list.tactiveool
          storage.set(this.tgid, this.list)
          this.$toast('已经添加到首页导航区')
        }else{
          this.list.active = !this.list.active
          storage.set(this.tgid, this.list)
          this.$toast('已经从首页导航区移除')
        }
      },
      vip() {
        if(!this.list.vip) {
          this.list.vip = !this.list.vip
          storage.set(this.tgid, this.list)
          this.$toast('已经添加到首页导航区')
        }else{
          this.list.vip = !this.list.vip
          storage.set(this.tgid, this.list)
          this.$toast('已经从首页导航区移除')
        }
      },
      stopserver() {
        if(!this.list.stopserver) {
          this.list.stopserver = !this.list.stopserver
          storage.set(this.tgid, this.list)
          this.$toast('已经添加到首页导航区')
        }else{
          this.list.stopserver = !this.list.stopserver
          storage.set(this.tgid, this.list)
          this.$toast('已经从首页导航区移除')
        }
      }
    },
    
  }
</script>

<style scoped>
.application {
  width: 750px;
  padding: 0 35px 150px;
  box-sizing: border-box;
  background: #fff;
}

h3 {
  font-size: 32px;
  color: #333;
  padding: 50px 0;
}

.necessary {
  position: relative;
  width: 330px;
  height: 125px;
}

.necessary_bg {
  display: block;
  width: 310px;
  height: 129px;
  background: url('../../../assets/img/apply/bg_open_server_sheet.png') no-repeat;
  background-size: 100%;
}

.icon_func {
  position: absolute;
  top: -20px;
  right: 0;
  width: 60px;
  height: 60px;
  background: url('../../../assets/img/apply/ic_function_add_small.png') no-repeat;
  background-size: 100%;
}

.icon_func_cat {
  position: absolute;
  top: -20px;
  right: 0;
  width: 60px;
  height: 60px;
  background: url('../../../assets/img/apply/ic_function_add_small_cat.png') no-repeat;
  background-size: 100%;
}

.icon_func_add {
  position: absolute;
  top: -20px;
  right: 0;
  width: 60px;
  height: 60px;
  background: url('../../../assets/img/apply/ic_func_add_ok.png') no-repeat;
  background-size: 100%;
}

.type_box {
  width: 680px;
  height: 280px;
  display: flex;
  flex-flow: wrap;
  justify-content: space-between;
  align-content: space-between;
}

.type_list {
  position: relative;
  width: 330px;
  height: 110px;
  font-size: 28px;
  color: #333;
}

.type_list_item {
  width: 310px;
  height: 120px;
  background: #f8f8f8;
  border-radius: 20px;
  display: flex;
  align-items: center;
}

.type_list img {
  width: 80px;
  height: 80px;
  margin: 0 15px 0 20px;
}

.detail_box {
  width: 680px;
  height: 280px;
  display: flex;
  flex-flow: wrap;
  justify-content: space-between;
  align-content: space-between;
}

.charge_box {
  width: 680px;
  height: 140px;
  display: flex;
  flex-flow: wrap;
  justify-content: space-between;
  align-content: space-between;
}


.tool_box {
  width: 330px;
  height: 120px;
  font-size: 28px;
  color: #333;
  position: relative;
}

.tool_box img {
  width: 80px;
  height: 80px;
  margin: 0 15px 0 20px;
}

.setup_box { 
  width: 680px;
  height: auto;
  background: #f8f8f8;
  border-radius: 20px;
  box-sizing: border-box;
  padding: 0 20px;
}

.setup_list {
  width: 100%;
  height: 88px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #fff;
}

.setup_list:last-child {
  border: 0;
}

.left_img {
  flex-shrink: 1;
  display: block;
  width: 36px;
  height: 36px;
  margin-right: 15px;
}

.setup_title {
  flex-grow: 1;
  font-size: 28px;
  color: #333;
}

.right_img {
  flex-shrink: 1;
  display: block;
  width: 18px;
  height: 30px;
}

.footer_text {
  padding-top: 40px;
  text-align: center;
  font-size: 20px;
  color: rgb(184, 184, 184);
}
</style>